<template>
  <el-dialog
    :title="titleMap[mode] + '👉' + form.name"
    v-model="visible"
    draggable
    :show-fullscreen="true"
    :width="600"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      :disabled="mode == 'show'"
      ref="dialogForm"
      label-width="120px"
      label-position="left"
    >
      <el-form-item label="店铺名称" prop="name">
        <el-input :disabled="true" v-model="form.name" clearable></el-input>
      </el-form-item>

      <el-card shadow="never" header="可销售品牌">
        <sc-table-select
          v-model="goodsbrand_arr"
          @click="handleClick"
          :apiObj="apiObj"
          :table-width="700"
          :width="600"
          :height="800"
          multiple
          clearable
          :props="props"
          @change="change"
        >
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column
            prop="name"
            label="品牌名"
            width="200"
          ></el-table-column>
          <el-table-column prop="goodscate_id" label="分类id"></el-table-column>
        </sc-table-select>
      </el-card>

      <el-form-item label="可销售主分类" prop="goodscate_ids">
        <el-input
          :disabled="true"
          v-model="form.goodscate_ids"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="店铺类型" prop="storetype_id">
        <el-input-number
          :disabled="true"
          v-model="form.storetype_id"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="营业执照照片" prop="bbl_image">
        <sc-upload
          :disabled="true"
          v-model="form.bbl_image"
          icon="el-icon-picture-outline"
        ></sc-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="mode != 'read'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],

  data() {
    return {
      apiObj: {},
      mode: "create",
      titleMap: {
        read: "查看",
        create: "新增",
        update: "审核",
      },
      visible: false,
      isSaveing: false,
      form: {
        id: 0,
        name: "",
        logo_image: "",
        goodsbrand_ids: "",
        goodscate_ids: "",
      },
      goodsbrand_arr: [],
      rules: {},
      status_option: { 0: "关闭", 1: "正常" },
      test_status_option: { 0: "未知", 1: "免考", 2: "已考" },
      apply_status_option: { 0: "未知", 1: "申请中", 2: "已通过", 3: "已拒绝" },
      ltd_status_option: { 1: "个人", 2: "企业" },
      ltdtype_status_option: { individual: "个体", ordinary: "普通企业" },
      payca_status_option: { 1: "待支付", 2: "已支付" },
      value: [],
      props: {
        label: "name",
        value: "id",
        keyword: "goodscate_id",
      },
    };
  },
  mounted() {
    // this.getBrand();//表格加载时会执行该方法
  },

  methods: {
    async change(val) {
      // 迭代数组的值
      for (const item of val) {
        console.log("依次输出数组中的每个对象 ", item); // 依次输出数组中的每个对象
      }
    },

    handleClick() {
      // 在这里编写处理点击事件的逻辑
      console.log("按钮被点击了");
    },

    async getBrand(goodsbrand_ids) {
      //获取现在已经有的品牌
      // console.log(this.data.form.goodsbrand_ids);
      // console.log(  data.form.goodsbrand_ids);

      var res = await this.$API.goodsbrand.read.get({ ids: goodsbrand_ids });
      this.goodsbrand_arr = res.data;
    },

    async getAllBrand(goodscate_ids) {
      //获取全部品牌

      // console.log(this.form.goodscate_ids);
      // let list = await this.$API.goodsbrand.read.get({
      //   goodscate_ids: goodscate_ids,
      // });
      // console.log(list.data);
      // this.apiObj = list.data;
      var res = await this.$API.goodsbrand.read.get({
        goodscate_ids: goodscate_ids,
      });
      this.apiObj = {
        code: res.code,
        data: { rows: res.data, total: res.data.length },
      };
      console.log(this.apiObj);
    },

    open(mode = "create") {
      this.mode = mode;
      this.visible = true;
      return this;
    },

    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = await this.$API.store[this.mode].post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success(res.message);
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        } else {
          return false;
        }
      });
    },

    setData(data) {
      console.log("data", data);
      //获取品牌的数据

      console.log(data.goodsbrand_ids, data.goodscate_ids);

      data.bbl_expire_time = data.bbl_expire_time * 1000;
      this.$TABLE.assign(this, data);
      this.getBrand(data.goodsbrand_ids);
      this.getAllBrand(data.goodscate_ids);
    },
  },
};
</script>
